<template>
	<view class="grid" v-if="data&&data.length>0">
		<block v-if="titles&&titles.title">
			<view class=" container">
				<view class="repair_title2 display-flex">
					<view class="info display-flex">
						<view class="">{{titles.title}}</view>
						<view class="num">{{titles.num}}</view>
					</view>
					<view class="tip arrow  display-flex" @click="onLink()">
						<text>查看详情</text>
						<image src="/static/icon_arrow.png" />
					</view>
				</view>
				<uni-grid :column="column" :square="false" :showBorder="false" :highlight="false">
					<uni-grid-item class="item" :class="!title?'item_height':''" v-for="(item,index) in data"
						:key="index" @click="goStatus(item)">
						<view class="info">
							<view class="number">{{Number(item.num).toLocaleString()}}</view>
							<view>{{item.label}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</block>
		<block v-else>
			<view class="repair_title" v-if="title">{{title}}</view>
			<view class="container">
				<uni-grid :column="column" :square="false" :showBorder="false" :highlight="false">
					<uni-grid-item class="item" :class="!title?'item_height':''" v-for="(item,index) in data"
						:key="index" @click="goStatus(item)">
						<view class="info">
							<view class="number">{{Number(item.num).toLocaleString()}}</view>
							<view>{{item.label}}</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>

		</block>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const emit = defineEmits(['select', 'onTitle'])
	const props = defineProps({
		data: {
			type: Array,
		},
		title: {
			type: String,
			default: ''
		},
		titles: {
			type: Object
		},
		column: {
			type: Number, //宫格个数
			default: 3
		}
	})
	const goStatus = (item) => {
		if (item.url) {
			uni.navigateTo({
				url: item.url
			})
		} else if (item.type === 'tab') {
			emit('select', item)
		}
	}
	const onLink = () => {
		emit('onTitle')
	}
</script>

<style lang="scss" scoped>
	.grid {
		padding: 0 32rpx 60rpx;

		&:last-child {
			padding-bottom: 0;
		}
	}

	.repair_title {
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 550;
		color: #323233;
		margin-bottom: 24rpx;
		margin-top: 60rpx;
	}

	.repair_title2 {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 550;
		color: #323233;
		// margin-bottom: 24rpx;
		padding: 30rpx 32rpx 6rpx;

		.num {
			font-size: 48rpx;
			padding-left: 24rpx;
		}

		.tip {
			font-size: 24rpx;
			color: #999999;
			font-weight: 400;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 6rpx;
			}
		}
	}

	.container {
		width: 100%;
		background-color: #ffffff;
		margin: auto;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 24rpx 0rpx rgba(0, 0, 0, 0.08);

		.item {
			// height: 192rpx;
			position: relative;
			padding: 32rpx 0;

			&:not(:last-child) {
				&::after {
					content: '';
					width: 1rpx;
					height: 64rpx;
					background-color: #EDEFF0;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -32rpx;
				}
			}

			.info {
				color: #999999;
				font-size: 24rpx;
				text-align: center;

				.number {
					color: #222222;
					font-size: 48rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
					line-height: 48rpx;
				}
			}
		}

		.item_height {
			padding: 34rpx 0;
		}
	}
</style>